<template>
	<div id="page">
		<div class="box">
			<a-form :model="data.form" @submit="handleSubmit" @submit.native.prevent :rules='data.rules'>
				<a-form-item name='username'>
					<label>用户名</label>
					<a-input v-model:value.trim="data.form.username" />
				</a-form-item>
				<a-form-item name='password'>
					<label>密码</label>
					<a-input v-model:value.trim="data.form.password" type="password" />
				</a-form-item>
				<a-form-item name='code'>
					<label>验证码</label>
					<a-row :gutter='10'>
						<a-col :span="14">
							<a-input v-model:value.trim="data.form.code" />
						</a-col>
						<a-col :span="10">
							<a-button type="primary">获取验证码</a-button>
						</a-col>
					</a-row>
				</a-form-item>
				<!-- 滑动验证 -->
				<a-form-item>
					<Captcha />
				</a-form-item>
				<a-form-item>
					<a-button type="primary" html-type="submit" block>
						登 录
					</a-button>
				</a-form-item>
			</a-form>
			<div class="text-center fs-12">
				<router-link to="/forget" class="color-white">忘记密码</router-link>
				|
				<router-link to="/register" class="color-white">注 册</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		onMounted
	} from 'vue'
	import Captcha from 'components/Captcha'
	import {
		stripscript,
		validateEmail,
		validatePass,
		validateCode
	} from '@/utils/validate.js'
	import {GetCode} from 'api/user.js'
	export default {
		name: 'Register',
		components: {
			Captcha
		},
		setup(props, {
			root
		}) {
			// 自定义校验规则 
			let checkUsername = async (rule, value) => {
				if (value === '') {
					return Promise.reject('邮箱不能为空！！');
				} else {
					return validateEmail(value)?Promise.resolve():Promise.reject('请输入正确格式的邮箱');
				}
			};
			let checkCode = async (rule, value) => {
				if (value === '') {
					return Promise.reject('请输入验证码！！');
				} else {
					return validateCode(value) ?  Promise.resolve():Promise.reject('请输入正确格式的验证码');
				}
			};
			let checkPass = async (rule, value) => {
				if (value === '') {
					return Promise.reject('请输入密码！！');
				} else {
					return validatePass(value) ? Promise.resolve() : Promise.reject('请输入字母+数字密码');
				}
			};
	



			const data = reactive({
				form: {
					username: '',
					password: '',
					code: '',
				},
				rules: {
					password: [{
						validator: checkPass,
						trigger: 'change'
					}],
					username: [{
						validator: checkUsername,
						trigger: 'change'
					}],
					code: [{
						validator: checkCode,
						trigger: 'change'
					}]
				},
			})



			const handleSubmit = () => {
					GetCode()
			}

			return {
				data,
				handleSubmit
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
s